<script setup>
import {ref, watch} from "vue";

// 理论上子组件可以访问父级组件的全部内容,
// 现代框架为了严格管理生命周期，
// 使用定义全局定义向更高层级暴露变量信息，提供索取变量内容
defineProps({
  msg: String
})

// 子组件理论上不可以主动干预父级组件变量信息，
// vue提供向上更高层暴露callBack函数，让上级决定如何处理函数和变量内容
let childInfo = ref("");
let emits = defineEmits(['child-input']);
watch(childInfo, () => {
  emits("child-input", childInfo.value)
});

</script>

<template>
  <div> 子组件测试 {{ msg }}</div>
  <!--  注意prop属性只负责定义，不可对数据进行双向绑定-->
  <!--  <input type="text" v-model="msg">-->
  <input type="text" v-model="childInfo"> 子组件输入内容
</template>

<style scoped>

</style>